<template>
  <dtDialog
    title="详情"
    :visible.sync="dialogVisible"
    :footerSlot="true"
  >
    <div class="table-container table-fullscreen">
      <dt-table
        v-if="dialogVisible"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-show-column="false"
        :pagination-data="{
          total: total,
          queryParams: queryParams,
        }"
        @handleSelectionChange="handleSelection"
        @pagination="getList"
      />
    </div>
  </dtDialog>
</template>

<script>
import { qryMerchantBySystem } from '@/api/unifiedPayment/businessSystem'

export default {
  data() {
    return {
      queryParams: {
        name: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      tableOpts: {
        configPagination: '1',
        rowKey: 'id',
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'merchantNum',
            label: '商户号',
            show: true
          },
          {
            prop: 'merchantName',
            label: '商户名称',
            show: true
          },
          {
            prop: 'merchantPhone',
            label: '商户手机号',
            show: true
          },
          {
            prop: 'state',
            label: '状态',
            show: true,
            formatter: (row) => {
              if (row.state == 1) {
                return '启用'
              } else if (row.state == 2) {
                return '禁用'
              }
              return '-'
            }
          },
          {
            prop: 'merchantType',
            label: '商户类型',
            show: true,
            formatter: (row) => {
              if (row.state == 1) {
                return '企业'
              } else if (row.state == 2) {
                return '个人'
              }
              return '-'
            }
          }
        ],
        tableData: []
      },
      dialogVisible: false,
      selectList: []
    }
  },
  methods: {
    open(systemId) {
      this.dialogVisible = true
      this.getList(systemId)
    },
    getList(systemId) {
      this.loading = true
      qryMerchantBySystem(systemId).then((res) => {
        this.tableOpts.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelection(selection) {
      this.selectList = selection
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-filter-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  button {
    margin-bottom: 24px;
  }
}
</style>
